<template>
    <div>
      <div class="tl-form-line-title sub-title">
        {{ title }}
        <div class="simple-pager">
          <slot  name="left-btn"></slot>
<!--          <i class="el-icon-caret-left" :class="pageInfo.currentPage > 1 ? 'on' : ''" @click="prePage"></i>-->
<!--          <i class="el-icon-caret-right" :class="pageInfo.currentPage < totalPage ? 'on' : ''" @click="nextPage"></i>-->
<!--          当前：{{ pageInfo.currentPage }}/{{ totalPage }}，共{{ pageInfo.totalCount }}条-->
        </div>
        <div class="toolbar" style="margin-right: 20px">
          <el-button type="text" size="medium" icon="el-icon-plus" @click="openAddDialog('tlEditSaveAndCopyForm')" v-if="editable">新增任命</el-button>
          <el-button type="text" size="medium" icon="el-icon-plus" @click="openAddDialog('tlEditRevokeForm')" v-if="editable">
            新增撤销</el-button>
          <el-button type="text" size="medium" icon="el-icon-download" @click="doExportExcel" v-hasPermission="['sys:excel:export']">导出</el-button>
        </div>
      </div>
    <!--表格渲染-->
      <el-table class="tl-table" ref="mainTable" size="small" v-loading="loading" :data="datas" @selection-change="doSelectChange" @sort-change="doSortChange" @row-dblclick="doRowDbClick" @row-click="doRowClick" row-key="id" border fit :row-class-name="doChangeRowClassName">
<!--        <el-table-column type="selection" width="55px" fixed="left" :selectable="doDisableCheckBox"></el-table-column>-->
        <el-table-column type="index" label="序号" width="55px" align="center"></el-table-column>
        <el-table-column prop="dispappointmenttype" label="任命类型" width="180px" sortable="custom" sort-by="appointmenttype" align="center" header-align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="usercode" label="工号" width="150px" sortable="custom" sort-by="usercode" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="username" label="姓名" width="150px" sortable="custom" sort-by="username" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="workgroup" label="工作组名称" width="150px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="dispprojectrole" label="项目角色" width="150px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="duty" label="职责" min-width="200px" sortable="custom" sort-by="duty" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="appointdate" label="任命日期" width="150px" sortable="custom" sort-by="appointdate" align="center" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="revokedate" label="撤销日期" width="150px" sortable="custom" sort-by="revokedate" align="center" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="操作" width="100px" v-slot="scope" fixed="right">
          <el-dropdown trigger="hover">
            <el-button type="text" icon="el-icon-s-operation" style="margin-left:10px">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
            <el-dropdown-menu>
              <el-dropdown-item icon="el-icon-edit" @click.native="clickEditDialog(scope.row)" v-show="showEditOrDelete(scope.row.candelete)" :disabled="!editable">编辑</el-dropdown-item>
              <el-dropdown-item icon="el-icon-delete" v-show="showEditOrDelete(scope.row.candelete)" :disabled="!editable" @click.native="doDelete(scope.row.id)">删除</el-dropdown-item>
              <el-dropdown-item icon="el-icon-view" @click.native="clickViewDialog(scope.row)">查看
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-table-column>
        <!-- <el-table-column prop="dispstate" label="状态" width="100px" sortable="custom" sort-by="state" align="center"
          header-align="center" :show-overflow-tooltip="true"></el-table-column> -->
      </el-table>
      <tl-edit ref="editForm" @refresh="doRefresh" :parentId="parentId" :teamType="teamType" :teamName="title"></tl-edit>
      <!-- <tl-edit-for-series-add ref="editForSeriesAddForm" @refresh="doRefresh" :parentId="parentId"></tl-edit-for-series-add> -->
      <tl-edit-save-and-copy ref="tlEditSaveAndCopyForm" @refresh="doRefresh" :parentId="parentId" :projectCode="projectCode" :teamType="teamType" :teamName="title" :projectId="projectId"></tl-edit-save-and-copy>
      <tl-edit-revoke ref="tlEditRevokeForm" @refresh="doRefresh" :parentId="parentId" :projectCode="projectCode" :teamType="teamType" :pre-team-type="preTeamType" :projectId="projectId">
      </tl-edit-revoke>
  </div>
</template>

<script>
/** mixins */
import { mixin_list } from '@tapui/mixins/mixin_list'
import { mixin_list_base } from '/src/mixins/mixin_list_base'
import tlEdit from './edit'
import tlEditSaveAndCopy from './editSaveAndCopy'
import tlEditRevoke from './editRevoke'
/** 工具类 */
import { getAction, putAction, postAction, deleteAction } from '@tapui/utils/http'
import { checkPermission } from '@tapui/utils/permission'
export default {
  name: 'sdProjectTeam',
  mixins: [mixin_list, mixin_list_base],
  components: { tlEdit, tlEditSaveAndCopy, tlEditRevoke },
  data() {
    return {
      description: '项目任命-项目组成员-列表查询',
      urlPrefix: '/sd/projectTeam/',
      url: {
        queryCodeList: '/sd/projectTeam/dataCodeList',
        list: '/sd/projectTeam/queryList'
      },
      // 排序参数
      sorterInfo: {
        sidx: 'sortcode',
        sord: 'asc'
      },
      isQueryOnCreated: false,
      rowDbClickActionType: 'view',
      pageInfo: {
        currentPage: 1, // 当前页面
        pageSize: 0, // 每页记录数
        pageSizes: ['10', '50', '100'],
        totalCount: 0 // 总数
      }
    }
  },
  props: {
    parentId: {
      type: [Number, String],
      default: ''
    },
    projectId: {
      type: [Number, String],
      default: ''
    },
    projectCode: {
      type: [String],
      default: ''
    },
    editable: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ''
    },
    teamType: {
      type: [Number],
      default: 0
    },
    preTeamType: {
      type: [String],
      default: ''
    }
  },
  computed: {
    // 编辑/删除按钮的显示/隐藏
    showEditOrDelete() {
      return (candelete) => {
        if (candelete === 1) {
          return false
        }
        return true
      }
    }
  },
  watch: {
    teamType: {
      immediate: true,
      handler(value, oldvalue) {
        if (value && value > 0) {
          this.doQuery()
          this.initPage()
        }
      }
    }
  },
  methods: {
    /** 表格双击事件 */
    doRowDbClick(row, column, event) {
      if (this.rowDbClickActionType === 'edit' && this.editable) {
        // 判断是否有权限
        if (this.editPermission.length > 0) {
          if (checkPermission(this.editPermission)) {
            if (row.appointmenttype === '2') {
              this.openEditDialog('tlEditRevokeForm', row[this.$refs.mainTable.rowKey])
            } else {
              this.openEditDialog('editForm', row[this.$refs.mainTable.rowKey])
            }
          } else {
            if (row.appointmenttype === '2') {
              this.openViewDialog('tlEditRevokeForm', row[this.$refs.mainTable.rowKey])
            } else {
              this.openViewDialog('editForm', row[this.$refs.mainTable.rowKey])
            }
          }
        } else {
          if (row.appointmenttype === '2') {
            this.openEditDialog('tlEditRevokeForm', row[this.$refs.mainTable.rowKey])
          } else {
            this.openEditDialog('editForm', row[this.$refs.mainTable.rowKey])
          }
        }
      } else if (this.rowDbClickActionType === 'view') {
        if (row.appointmenttype === '2') {
          this.openViewDialog('tlEditRevokeForm', row[this.$refs.mainTable.rowKey])
        } else {
          this.openViewDialog('editForm', row[this.$refs.mainTable.rowKey])
        }
      }
    },
    clickViewDialog(row) {
        if (row.appointmenttype === '2') {
          this.openViewDialog('tlEditRevokeForm', row[this.$refs.mainTable.rowKey])
        } else {
          this.openViewDialog('editForm', row[this.$refs.mainTable.rowKey])
        }
    },
    clickEditDialog(row) {
      if (this.editPermission.length > 0) {
        if (checkPermission(this.editPermission)) {
          if (row.appointmenttype === '2') {
            this.openEditDialog('tlEditRevokeForm', row[this.$refs.mainTable.rowKey])
          } else {
            this.openEditDialog('editForm', row[this.$refs.mainTable.rowKey])
          }
        } else {
          if (row.appointmenttype === '2') {
            this.openViewDialog('tlEditRevokeForm', row[this.$refs.mainTable.rowKey])
          } else {
            this.openViewDialog('editForm', row[this.$refs.mainTable.rowKey])
          }
        }
      } else {
        if (row.appointmenttype === '2') {
          this.openEditDialog('tlEditRevokeForm', row[this.$refs.mainTable.rowKey])
        } else {
          this.openEditDialog('editForm', row[this.$refs.mainTable.rowKey])
        }
      }
    },
    // 禁用表格前面的选择
    doDisableCheckBox(row, index) {
      if (row.state !== 0 && row.state !== 2) {
        return false
      } else {
        return true
      }
    },
    initPage() {
      if (this.editable) {
        this.rowDbClickActionType = 'edit'
      } else {
        this.rowDbClickActionType = 'view'
      }
    },
    beforeLoadData() {
      if (!this.parentId) {
        return false
      }
      this.queryParam.parentid = this.parentId
      this.queryParam.qry_teamType = this.teamType
      return true
    }
  }
}
</script>

<style scoped lang="scss">
  // 滚动条的宽度
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 10px; // 横向滚动条
    height: 7px; // 纵向滚动条 必写
  }
  // 滚动条的滑块
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius:  3px;
    background-color: rgba(144,147,153,.3)
  }
  /deep/ .el-table__fixed-right {
     height: 100% !important;
  }
  /deep/ .el-table__body-wrapper {
    cursor: pointer;
  }
</style>

